{extend name="public:base"}
{block name="body"}
<style>
    .upload_img_list{margin-top: 10px;}
    .upload_img_list > .img_list{display: inline-block;position: relative;margin-right:5px;background-color:#f9f9f9;border:1px solid #efefef;}
    .upload_img_list > .img_list > span{position:absolute;right:5px; top:5px; display: block; background-color:#f56c6c;height:20px;line-height: 20px;color:#fff;}
    .pear-input{
	height: 38px;
    line-height: 1.3;
    border-width: 1px;
    border-style: solid;
    background-color: #fff;
    color: rgba(0,0,0,.85);
    border-radius: 2px;
    border-color: #eee;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
	display: block;
    width: 100%;
    padding-left: 10px;
}
.skuCtl,.argsCtl{padding-left: 5px;}
.skuImg{display: block; width:49px;height:49px; border:1px solid #f3f3f3;}
.skuImg img{width:49px;height:49px;}
.pd10{padding:5px;}
</style>
<body>
		<form class="layui-form layui-form-pane" action="">
			<div class="mainBox">
				<div class="main-container">
                   <div class="layui-row">
                        <div class="layui-col-xs12 layui-col-sm6 layui-col-md6">
                            <div class="layui-form-item">
                                <label class="layui-form-label">标题</label>
                                <div class="layui-input-block">
                                    <input type="text" name="title" value="{$info.title|default=''}" lay-verify="required" autocomplete="off"
                                        placeholder="请输入标题" class="layui-input">
                                </div>
                            </div>
                        </div>
                        <div class="layui-col-xs12 layui-col-sm6 layui-col-md6">
                            <div class="layui-form-item">
                                <label class="layui-form-label">所属学科</label>
                                <div class="layui-input-block">
                                    <select name="subject_id" lay-search="{caseSensitive:false, fuzzy: true}">
                                        <option value="">请选择</option>
                                        {volist name="subject" id="vo"}
                                        <option value="{$vo.id}"  {present name="info.subject_id"} {eq name="info.subject_id" value="$vo['id']"} selected {/eq} {/present} >{$vo.name}</option>
                                        {/volist}
                                    </select>
                                </div>
                            </div>
                        </div>
                        <div class="layui-col-xs12 layui-col-sm6 layui-col-md4">
                            <div class="layui-form-item">
                                <label class="layui-form-label">微课视频</label>
                                <div class="layui-input-block" style="left:5px;">
                                    <input type="text" name="video" value="{$info.video|default=''}" lay-verify="required" autocomplete="off"
                                        placeholder="视频地址" class="layui-input">
                                    <div class="layui-upload-drag" style="display: block;" id="ID-upload-demo-drag">
                                        <i class="layui-icon layui-icon-upload"></i> 
                                        <div>上传微课视频</div>
                                        <div id="ID-upload-demo-preview">
                                            {present name="info.video"}
                                            <video controls>
                                                <source src="{$info.video}" type="video/mp4" style="width: 320px;height:auto;">
                                                Your browser does not support the video tag.
                                            </video>
                                            {/present}
                                            
                                        </div>
                                      </div>
                                </div>
                            </div>
                        </div>
                        <div class="layui-col-xs12 layui-col-sm12 layui-col-md6">
                            <div class="layui-form-item">
                                <label class="layui-form-label">微课试题</label>
                                <div class="layui-input-block">
                                    <div class="argsCtl">
                                        <button class="pear-btn pear-btn-primary" type="button" id="argsBtn">添加答案</button>
                                    </div>
                                    <div class="argsDom">
                                        <table class="layui-table">
                                            <thead>
                                                <tr>
                                                    <th>进度秒数</th><th>正确答案</th><th>操作</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                {present name="info.items"}
                                                {foreach $info['items'] as $k=>$v }
                                                <tr>
                                                    <td><input type="number" name="times[]" value="{$v['times']}" class="pear-input argsname" readonly placeholder="时间秒数"/></td>
                                                    <td><input type="text" name="answer[]" value="{$v['answer']}" class="pear-input argsvalue" readonly placeholder="正确答案"/></td>
                                                    <td><button class="pear-btn pear-btn-danger" type="button" id="argsDel">删除</button></td>
                                                </tr>
                                                {/foreach}
                                                {/present}
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="layui-col-xs12 layui-col-sm6 layui-col-md6">
                            <div class="layui-form-item">
                                <label class="layui-form-label">排序</label>
                                <div class="layui-input-block">
                                    <input type="number" name="sort" value="{$info.sort|default='100'}" lay-verify="required" autocomplete="off"
                                        placeholder="数字越小越靠前" class="layui-input">
                                </div>
                            </div>
                        </div>
                   </div>
                </div>
            </div>
            <div class="bottom">
            <div class="button-container">
                <input type="hidden" name="id" value="{$info.id|default=''}">
                <button type="submit" class="pear-btn pear-btn-primary pear-btn-sm" lay-submit=""
                    lay-filter="form-save">
                    <i class="layui-icon layui-icon-ok"></i>
                    提交
                </button>
                <button type="reset" class="pear-btn pear-btn-sm">
                    <i class="layui-icon layui-icon-refresh"></i>
                    重置
                </button>
            </div>
            </div>
		</form>
	</body>
{/block}
{block name="script"}
<script>
    layui.use(['jquery','form','upload'], function() {
        let form = layui.form;
        let $ = layui.jquery;
        let upload =layui.upload;
        let upload_box = $('#upload_box_images'); 
        let select = layui.select;
        layui.upload.render({
			elem: '#thumbBtn'
			, url: '{:url("ajax/upload")}'
			, done: function (res) {
				//如果上传失败
				if (res.code == 0) {
					return layer.msg('上传失败');
				}
				//上传成功
				
				$('#upload_box_thumb input').attr('value', res.data);		
				$('#upload_box_thumb img').attr('src', res.data);
			}
		});
        $(document).on('click','#argsBtn',function(){
            let dom ='<div class="layui-col-xs3">';
                dom +='<input type="number" value="" class="pear-input argsname" placeholder="秒数:例 300"/>'
                dom +='</div>';
                dom +='<div class="layui-col-xs3">';
                dom +='<input type="text" value="" class="pear-input argsvalue" placeholder="答案:例A"/>'
                dom +='</div>';
                dom +='<div class="layui-col-xs6">';
                dom += '<button class="pear-btn pear-btn-primary" type="button" id="argsQure">确认</button> <button class="pear-btn pear-btn-danger" type="button" id="argsEsc">取消</button>'
                dom +='</div>';
            $('.argsCtl').html(dom);
        });
        $(document).on('click','#argsQure',function(){
           
           let argsname= $('.argsCtl').find('.argsname').val();
           if(argsname == ''){
            layer.alert('请填写时间秒数');
            return ;
           }
           let argsvalue= $('.argsCtl').find('.argsvalue').val();
           if(argsvalue == ''){
            layer.alert('请填写正确答案');
            return ;
           }
           let dom ='<tr><td>';
                dom +='<input type="number" class="pear-input argsname" name="times[]" value="'+argsname+'" readonly />' 
                dom+="</td><td>"
                dom +='<input type="text" value="'+argsvalue+'" name="answer[]" class="pear-input argsvalue" readonly />'
                dom+="</td><td>"
                dom+='<button class="pear-btn pear-btn-primary" type="button" id="argsDel">删除</button>'
                dom+="</td></tr>"
            $('.argsDom > table > tbody').append(dom);
            $('.argsCtl').html('<button class="pear-btn pear-btn-primary" type="button" id="argsBtn">添加参数</button>');
        });
        $(document).on('click','#argsEsc',function(){
            $('.argsCtl').html('<button class="pear-btn pear-btn-primary" type="button" id="argsBtn">添加参数</button>');
        });
        $(document).on('click','#argsDel',function(){
            $(this).closest('tr').remove();
        });
        $(document).on('blur','input[name="video"]',function(){
        	let value = $('input[name="video"]').attr('value');
            if(value == ''){
                $('#ID-upload-demo-preview').html('');
                return ;
            }
            $('#ID-upload-demo-preview').html('<video controls><source  style="width: 320px;height:auto;" src="'+value+'" type="video/mp4">Your browser does not support the video tag.</video>');
        })
       upload.render({
            elem: '#ID-upload-demo-drag'
            , url: '{:url("ajax/upload")}'
            , accept: 'video' //普通文件
            , done: function (res) {
                //如果上传失败
                if (res.code == 0) {
                    return layer.msg('上传失败');
                }
                $('input[name="video"]').attr('value', res.data);
                $('#ID-upload-demo-preview').html('<video controls><source style="width: 320px;height:auto;" src="'+res.data+'" type="video/mp4">Your browser does not support the video tag.</video>');
            }
        });
       
        
        form.on('submit(form-save)', function(data) {
            $.ajax({
                url: '{:url("edit")}',
                data: $('.layui-form').serialize(),
                type: 'post',
                success: function(result) {
                    if (result.code == 1) {
                        layer.msg('操作成功', {
                            icon: 1,
                            time: 1000
                        }, function() {
                            parent.layer.close(parent.layer.getFrameIndex(window.name)); //关闭当前页
                            parent.layui.table.reload("table-list");
                        });
                    } else {
                        layer.msg(result.msg, {
                            icon: 2,
                            time: 1000
                        });
                    }
                }
            })
            return false;
        });
    })
</script>
{/block}
